<template>
    <div class="chat-item">

        <div class="i-pic">
            <img v-lazy="downloadUrl + chat.chatCover" />
        </div>

        <div class="i-title">
            <span class="chatTitle">{{ chat.chatTitle }}</span>
        </div>

        <div class="i-tags">
            <i class="el-icon-user"></i>
            {{ tenThousand(chat.peopleNum) }}
        </div>

        <div class="i-btn">
            <el-button class="apply" @click="dialogVisible = true" v-if="inChat(chat.id)" size="small"
                round>申请入群</el-button>
            <el-button class="manage" @click="routerJump('/o/chat/PublishChat?keyword=' + chat.id)"
                v-if="isManager(chat.id)" type="warning" size="small" round>管理本群</el-button>
            <el-button class="comeIn" @click="routerJump('/o/chat/MyChat?keyword=' + chat.id)" v-if="!inChat(chat.id)"
                size="small" round>进入群聊</el-button>
        </div>

        <el-dialog title="确定要加入该聊天室吗？" :visible.sync="dialogVisible" width="30%">
            <div class="i-confirm">
                <div class="">聊天室成立时间：{{ chat.createTime }}</div>
                <div class="">聊天室人数：{{ chat.peopleNum }}</div>
                <div class="">聊天室简介：{{ chat.chatIntroduction }}</div>
            </div>
            <span slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addChatUser(chat.id)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
import { addChatUser } from "@/api/other/chatUser";

export default {
    name: "chat-item",
    props: {
        chat: {
            type: Object,
            default() {
                return {};
            },
        },
        userChatList: {
            type: Array,
            default() {
                return [];
            },
        },
        managerList: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    data() {
        return {
            userId: 1,
            dialogVisible: false,
            downloadUrl: process.env.VUE_APP_DOWNLOAD_URL,
        };
    },
    computed: {
        // 计算数量过万就转换
        tenThousand() {
            // 计算属性是一个属性不是一个方法, 使用函数返回
            return (count) => {
                if (count >= 100000000) {
                    return (count / 100000000).toFixed(1) + "亿";
                }
                return count >= 10000 ? (count / 10000).toFixed(1) + "万" : count;
            };
        },
    },

    methods: {
        // 加群
        async addChatUser(chatId) {
            let chatUserRelaEntity = {
                "chatId": chatId,
                "userId": this.userId,
            }
            const { data: res } = await addChatUser(chatUserRelaEntity);
            console.log(res.data);
            this.userChatList.push(chatId);
        },

        // 判断用户是否在该群里
        inChat(chatId) {
            if (this.userChatList.includes(chatId)) {
                return false;
            } else {
                return true;
            }
        },
        // 判断用户是否为群管理
        isManager(chatId) {
            if (this.managerList.includes(chatId)) {
                return true;
            } else {
                return false;
            }
        },

        // 路由跳转
        routerJump(id) {
            this.$router.push(`${id}`);
        },
    },
};
</script>
  
<style scoped>
.chat-item {
    box-sizing: border-box;
    width: 200px;
    height: 210px;
    border: 1px solid #e1e5eb;
    border-radius: 6px;
    overflow: hidden;
    font: 12px Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB,
        Heiti SC, WenQuanYi Micro Hei, sans-serif;
}

.chat-item:hover {
    background-color: rgb(223, 223, 223, 0.3);
}

.i-pic {
    position: relative;
    overflow: hidden;
    height: 120px;
}

.i-pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.i-pic span {
    position: absolute;
    bottom: 0;
    right: -1px;
    padding: 2px 4px;
    background: rgba(0, 0, 0, 0.5);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    color: #fff;
}

.i-title {
    margin: 5px;
    color: #414141;
    /* 字间距 */
    letter-spacing: 1px;
    line-height: 20px;
    height: 20px;
    overflow: hidden;
}

.i-tags {
    margin: 5px;
}

.i-btn {
    margin: 5px;
}

.apply {
    float: left;
}

.manage {
    float: left;
}

.comeIn {
    float: right;
}

.i-confirm {
    margin: 5px;
}
</style>